<template>
	<u-sticky>
		<view class="tabsBox">
			<text v-for="(item, index) in tabsList" :key="index"
				:style="getTabsWidth"
				:class="{'tabs_select' : tabsIndex === index}"
				@click="switchTabs(index)">{{ `${item.name}(${tabsDataLength[index]})` }}</text>
		</view>
	</u-sticky>
</template>

<script>
	export default {
		name: "TabsSwitch",
		props: {
			tabsList: {
				type: Array,
				require: true
			},
			tabsDataLength: {
				type: Array,
				require: true
			}
		},
		data() {
			return {
				tabsIndex: 0,
			};
		},
		computed: {
			getTabsWidth() {
				return `width: ${(100 / this.tabsList.length)}%`
			}
		},
		methods: {
			switchTabs(index) {
				if (index === this.tabsIndex) return
				this.$emit('tabsClick', index)
				this.tabsIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabsBox {
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		color: #999999;
		background-color: #F6F6F6;

		text {
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
		}
	}

	.tabs_select {
		color: #202D41;
	}
</style>
